<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Mozillia - Text2Speech engine</title>

    <!-- Bootstrap core CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" 
     integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" rel="stylesheet">

    <!-- Custom styles for this template -->
    <style>
      body {
        padding-top: 54px;
      }
      @media (min-width: 992px) {
        body {
          padding-top: 56px;
        }
      }

    </style>
  </head>
  
  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Mozilla TTS</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Page Content -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h1 class="mt-5">Mozilla TTS server example.</h1>
          <p class="lead">It is "work-in-progress" with an "far-to-be-alpha" release.</p>
          <ul class="list-unstyled">
          </ul>
          <input id="text" placeholder="Enter text" size=45 type="text" name="text"> 
          <button id="speak-button" name="speak">Speak</button><br/><br/>
          <audio id="audio" controls autoplay hidden></audio>
          <p id="message"></p>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
    <script>
            function q(selector) {return document.querySelector(selector)}
            q('#text').focus()
            q('#speak-button').addEventListener('click', function(e) {
                text = q('#text').value
                if (text) {
                    q('#message').textContent = 'Synthesizing...'
                    q('#speak-button').disabled = true
                    q('#audio').hidden = true
                    synthesize(text)
                }
                e.preventDefault()
                return false
            })
            function synthesize(text) {
                fetch('/api/tts?text=' + encodeURIComponent(text), {cache: 'no-cache'})
                    .then(function(res) {
                        if (!res.ok) throw Error(res.statusText)
                            return res.blob()
                        }).then(function(blob) {
                            q('#message').textContent = ''
                            q('#speak-button').disabled = false
                            q('#audio').src = URL.createObjectURL(blob)
                            q('#audio').hidden = false
                        }).catch(function(err) {
                            q('#message').textContent = 'Error: ' + err.message
                            q('#speak-button').disabled = false
                        })
            }
        </script>

  </body>

</html>
